<template>
    <div class="singerDetails">
        <main>
            <div class="top-box">
                <div class="top-singerDetailsBox">
                    <div class="singer-content">
                        <div class="top-content">
                            <div class="img-box">
                                <img
                                    :src="artistInformation.img1v1Url"
                                    alt=""
                                />
                            </div>
                            <div class="singerName">
                                <span>{{ artistInformation.name }}</span>
                            </div>
                            <div class="focusSinger">
                                <button>
                                    <i class="el-icon-plus"></i>关注他
                                </button>
                            </div>
                        </div>
                        <div class="singerDescribeBox">
                            <p>{{ artistInformation.briefDesc }}</p>
                        </div>
                        <div class="singerInformantion">
                            <ul>
                                <li>
                                    <span>{{
                                        artistInformation.musicSize
                                    }}</span>
                                    <p>单曲数</p>
                                </li>
                                <li>
                                    <span>{{
                                        artistInformation.albumSize
                                    }}</span>
                                    <p>专辑数</p>
                                </li>
                                <li>
                                    <span>{{ artistInformation.mvSize }}</span>
                                    <p>MV数</p>
                                </li>
                                <li>
                                    <span>15000230</span>
                                    <p>粉丝数</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="singerDetailsBox-arrow">
                    <img
                        src="../../assets/images/arrow-lr.5aa8d800.png"
                        alt=""
                    />
                </div>
            </div>
            <div class="changeDetailsType w">
                <ul>
                    <li
                        :class="
                            currentType.type == '作品' ? 'selectedType' : ''
                        "
                        @click="jumpMusic()"
                    >
                        作品
                    </li>
                    <li
                        :class="
                            currentType.type == '专辑' ? 'selectedType' : ''
                        "
                        @click="jumpAlbum()"
                    >
                        专辑
                    </li>
                    <li
                        :class="currentType.type == 'MV' ? 'selectedType' : ''"
                        @click="jumpMv()"
                    >
                        MV
                    </li>
                    <li
                        :class="
                            currentType.type == '歌手详情' ? 'selectedType' : ''
                        "
                        @click="jumpText()"
                    >
                        歌手详情
                    </li>
                    <li
                        :class="
                            currentType.type == '相似歌手' ? 'selectedType' : ''
                        "
                        @click="jumpSimilar()"
                    >
                        相似歌手
                    </li>
                </ul>
            </div>
            <div class="playAllmusic w">
                <div class="info-play-btn">
                    <el-button type="danger" round>
                        <i class="el-icon-headset"></i>播放全部</el-button
                    >
                </div>
            </div>
            <div class="main-content w">
                <router-view></router-view>
            </div>
        </main>
    </div>
</template>

<script>
import singerMusicList from "../../components/singerMusicList/SingerMusicList.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
    "singerDetails"
);
export default {
    components: {
        singerMusicList,
    },
    data() {
        return {
            currentType: {
                type: "作品",
            },
        };
    },
    computed: {
        ...mapState(["artistInformation"]),
    },
    created() {
        this.getArtistAllSongs(this.$route.params._id);

        //用于记录用户的滚动方向，用户一滚动，就把滚动后得到的值赋给这个值
        //等于是一个单向锁，防止用户向上滚动的时候也会触发事件
        this.prevY = 0;
    },
    methods: {
        ...mapActions(["getArtistAllSongs"]),
        playListJumpDetails(val) {
            this.$router.push("/home/playlist-details/" + val);
        },
        jumpMusic(val) {
            this.currentType.type = "作品";
            this.$router.push(
                "/home/singerDetails/art-musicList/" + this.$route.params._id
            );
        },
        jumpMv(val) {
            this.currentType.type = "MV";
            this.$router.push(
                "/home/singerDetails/art-mv/" + this.$route.params._id
            );
        },
        jumpAlbum(val) {
            this.currentType.type = "专辑";
            this.$router.push(
                "/home/singerDetails/art-album/" + this.$route.params._id
            );
        },
        jumpText(val) {
            this.currentType.type = "歌手详情";
            this.$router.push(
                "/home/singerDetails/art-text/" + this.$route.params._id
            );
        },
        jumpSimilar(val) {
            this.currentType.type = "相似歌手";
            this.$router.push(
                "/home/singerDetails/art-similar/" + this.$route.params._id
            );
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/singerDetails.scss";
</style>